<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div slot="header" class="clearfix">
            <span>藏品总数</span>
          </div>
          <div class="dashboard-card-content">
            <i class="el-icon-picture-outline"></i>
            <div class="dashboard-card-value">{{ statistics.exhibitCount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div slot="header" class="clearfix">
            <span>用户总数</span>
          </div>
          <div class="dashboard-card-content">
            <i class="el-icon-user"></i>
            <div class="dashboard-card-value">{{ statistics.userCount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div slot="header" class="clearfix">
            <span>今日预约</span>
          </div>
          <div class="dashboard-card-content">
            <i class="el-icon-date"></i>
            <div class="dashboard-card-value">{{ statistics.todayAppointmentCount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div slot="header" class="clearfix">
            <span>待处理反馈</span>
          </div>
          <div class="dashboard-card-content">
            <i class="el-icon-message"></i>
            <div class="dashboard-card-value">{{ statistics.pendingFeedbackCount }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>最近预约</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="goToAppointmentList">查看更多</el-button>
          </div>
          <el-table :data="recentAppointments" style="width: 100%" v-loading="loading">
            <el-table-column prop="visitorName" label="预约人" width="120"></el-table-column>
            <el-table-column prop="appointmentDate" label="预约日期"></el-table-column>
            <el-table-column prop="timeSlot" label="时间段"></el-table-column>
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>最近反馈</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="goToFeedbackList">查看更多</el-button>
          </div>
          <el-table :data="recentFeedbacks" style="width: 100%" v-loading="loading">
            <el-table-column prop="title" label="标题" show-overflow-tooltip></el-table-column>
            <el-table-column prop="type" label="类型" width="100"></el-table-column>
            <el-table-column prop="createTime" label="提交时间" width="180"></el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template slot-scope="scope">
                <el-tag :type="getFeedbackStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      loading: false,
      statistics: {
        exhibitCount: 128,
        userCount: 256,
        todayAppointmentCount: 32,
        pendingFeedbackCount: 8
      },
      recentAppointments: [
        { visitorName: '张三', appointmentDate: '2023-03-01', timeSlot: '上午 9:00-11:00', status: 'APPROVED' },
        { visitorName: '李四', appointmentDate: '2023-03-01', timeSlot: '下午 14:00-16:00', status: 'PENDING' },
        { visitorName: '王五', appointmentDate: '2023-03-02', timeSlot: '上午 9:00-11:00', status: 'APPROVED' },
        { visitorName: '赵六', appointmentDate: '2023-03-02', timeSlot: '下午 14:00-16:00', status: 'REJECTED' }
      ],
      recentFeedbacks: [
        { title: '展览很精彩，希望增加讲解', type: 'SUGGESTION', createTime: '2023-03-01 10:23:45', status: 'PENDING' },
        { title: '洗手间指示不明显', type: 'COMPLAINT', createTime: '2023-03-01 14:12:36', status: 'PROCESSING' },
        { title: '关于恐龙化石的问题', type: 'QUESTION', createTime: '2023-03-02 09:45:21', status: 'RESOLVED' },
        { title: '希望增加儿童互动区', type: 'SUGGESTION', createTime: '2023-03-02 16:08:53', status: 'PENDING' }
      ]
    }
  },
  methods: {
    getStatusType(status) {
      const statusMap = {
        'PENDING': 'warning',
        'APPROVED': 'success',
        'REJECTED': 'danger',
        'CANCELED': 'info'
      }
      return statusMap[status] || 'info'
    },
    getFeedbackStatusType(status) {
      const statusMap = {
        'PENDING': 'warning',
        'PROCESSING': 'primary',
        'RESOLVED': 'success',
        'CLOSED': 'info'
      }
      return statusMap[status] || 'info'
    },
    goToAppointmentList() {
      this.$router.push('/admin/appointments')
    },
    goToFeedbackList() {
      this.$router.push('/admin/feedbacks')
    }
  },
  mounted() {
    // 模拟加载数据
    this.loading = true
    setTimeout(() => {
      this.loading = false
    }, 1000)
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.dashboard-card {
  height: 180px;
}

.dashboard-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120px;
}

.dashboard-card-content i {
  font-size: 48px;
  color: #409EFF;
  margin-bottom: 10px;
}

.dashboard-card-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
}

.el-row {
  margin-bottom: 20px;
}
</style> 